<template>
  <div class="learnDetails">
    <template v-if="this.$route.path == '/theUser/userDetails/learnDetails'">
      <div class="aroundOf">学习记录</div>
      <div class="learn_students">
        <div class="xy_t">
          <el-button type="text" size="small" @click="chooseDay(item.text,index)" v-for="(item,index) in pickerOptions.shortcuts" :key = "index" :class="ind == index ? 'act' : '' ">{{ item.text }}</el-button>
          <el-date-picker
            v-model="picker"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeBlue"
            :clearable="false">
          </el-date-picker>
          <!-- <el-button type="primary" class="sousuo" @click="searchSou">搜索</el-button> -->
        </div>
        <data-from :tableData='tableData' @theReport="theReport"></data-from>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </template>

    <transition name="transitionName">
			<router-view clss="index-main" />
    </transition>

  </div>
</template>

<script>
import dataFrom from '../../components/thieUser/dataFrom.vue';
import { timestampToTimes, timestampToTimeShi, timestampToTimesEs } from '../../utils/util';
export default {
  components: { dataFrom },
  data() {
    return {
      picker: '',  //这个就是时间的显示
      pickerOptions: { shortcuts: [{ text: '近7天', }, { text: '近30天', }] },
      tableData: [],  //学习记录数据列表
      ind: 1,  //默认30天
      newDateSe: {},  //用户详情传过来的数据 只用了一个id
			currentPage: 0,   // 那一页
			total: 0,          // 总条数
			pageSize: 20,       // 每页显示多少条
      dayTie: '',
    }
  },
  watch: {
    picker: function(newVal,oldVal) {
      this.picker = newVal;
      // return newVal;
    },
    deep: true
  },
  mounted() {
    var _this = this;
    _this.conversionTime();  // 进入该页默认显示三十天的时间
    _this.lisDataDetails();  // 学习记录列表
    _this.newDateSe = JSON.parse(sessionStorage.getItem('toViewRow')); 
    // console.log(_this.newDateSe)
  },
  methods: {
    // 学习记录列表数据
    lisDataDetails(){
      this.$http.theUser.dataDetails({sid: JSON.parse(sessionStorage.getItem('toViewRow')).id, cid: JSON.parse(sessionStorage.getItem('toViewRow')).cid}).then( res => {
        this.tableData = res.data;
        this.pageSize = res.size;
        this.total = res.total;
        this.tableData.filter( item => { 
          item.shi= timestampToTimeShi(item.shi);
        })
      })
    },
    // // 搜索
    // searchSou(){
    //   if(this.ind == 1){ this.chooseNumber(30); } else { this.chooseNumber(7);}
    //   // console.log(timestampToTimes(this.picker[0]).split(' ')[0],timestampToTimes(this.picker[1]))
    // },
    // 转换时间方法
    conversionTime() {
      if(this.ind == 1){
				this.dayTie = '近30天'
        const end = new Date();
        const start = new Date(); 
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        let newArrYi = [];
        newArrYi.push(start,end);
        this.picker = newArrYi;
      } 
    },
    // 近7天 近30天选择
    chooseDay(val,index){
      this.dayTie = val;
      this.ind = index;
      this.currentPage = 1;
      if(val == '近7天'){
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        let newArr = [];
        newArr.push(start,end);
        this.picker = newArr;
        this.chooseNumber(7);
      }else{
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        let newArrYi = [];
        newArrYi.push(start,end);
        this.picker = newArrYi;
        this.chooseNumber(30);
      }
    },
    // 30天公共方法
    chooseNumber(val) {
      this.$http.theUser.dataDetails({sid: JSON.parse(sessionStorage.getItem('toViewRow')).id, cid: JSON.parse(sessionStorage.getItem('toViewRow')).cid,da: val,MaxDate: timestampToTimesEs(this.picker[1]).split(' ')[0],MinDate: timestampToTimesEs(this.picker[0]).split(' ')[0]}).then( res => {
        this.tableData = res.data;
        this.total = res.total;
				this.currentPage = res.currentPage;
        this.tableData.filter( item => {
          item.shi= timestampToTimeShi(item.shi)
        })
      })
    },
    // 这个方法是自定义时间选中的日期
    changeBlue(){
      this.$http.theUser.dataDetails({sid: JSON.parse(sessionStorage.getItem('toViewRow')).id,cid: JSON.parse(sessionStorage.getItem('toViewRow')).cid,MaxDate: timestampToTimesEs(this.picker[1]).split(' ')[0],MinDate: timestampToTimesEs(this.picker[0]).split(' ')[0],page: this.currentPage}).then( res => {
        this.tableData = res.data;
        this.total = res.total;
        this.tableData.filter( item => {
          item.shi= timestampToTimeShi(item.shi);
        })
      })
    },
    // 操作中的报告跳转
    theReport(index,row){
      sessionStorage.setItem('reportRi',JSON.stringify(row));
      this.$router.push({
        name: 'theReport',
        params: row
      })
    },
    // 分页
    handleSizeChange(val) {
      this.currentPage = val;
    },
    handleCurrentChange(val) {// console.log(this.dayTie)
      this.currentPage = val;
      this.$http.theUser.dataDetails({sid: JSON.parse(sessionStorage.getItem('toViewRow')).id,cid: JSON.parse(sessionStorage.getItem('toViewRow')).cid,da: this.dayTie == '近30天' ? '30' : '7',MaxDate: timestampToTimesEs(this.picker[1]).split(' ')[0],MinDate: timestampToTimesEs(this.picker[0]).split(' ')[0],page: val}).then( res => {
        this.tableData = res.data;
        this.total = res.total;
				this.currentPage = res.currentPage;
        this.tableData.filter( item => {
          item.shi= timestampToTimeShi(item.shi);
        })
      })
    }
  }
}
</script>

<style scoped>
@import '../../assets/css/theUser/learnDetails.scss';
</style>
